<template>
	<view-box class="ZymlListxqDetailFile" bodyPaddingTop="0" bodyPaddingBottom="0">
		<x-header title="部门资源目录" :left-options="{showBack:true,backText:'返回'}" :right-options="{showMore: true}" @on-click-more="menusFlag = true">
		</x-header>
		<div style="height:20%;width:100%;padding: 7px; background-color: #FFFFFF;">
			<div id="" style="width:30%;height:100%;float: left;">
				<img src="../assets/kuben.png" />
			</div>
			<div style="width:65%;height:100%;float: left;font-size: 9px;padding-top: 7px;">
				<h3>{{detailList.resource.resourceName}}</h3>
				<p>信息资源提供方：{{detailList.organ.name}}</p>
				<p>信息资源分类：{{detailList.parentCodeName}}</p>
				<p>更新时间：{{detailList.resource.updateTime ? detailList.resource.publicTime:detailList.resource.updateTime}}</p>
			</div>
		</div>
		
		

		<tab>
			<tab-item selected @on-item-click="onItemClick(1)">基本信息</tab-item>
			<tab-item @on-item-click="onItemClick(2)" v-if="detailList.fileCommSize > 0">附件</tab-item>

			<tab-item @on-item-click="onItemClick(3)">数据项</tab-item>
			<tab-item @on-item-click="onItemClick(4)" v-if="detailList.resource.resourceMount == '1'">接口</tab-item>
		</tab>
		
		<div class="chartbox" v-show="show1" style="font-size: 14px;background-color: #FFFFFF;padding: 7px;">

			<table frame=void style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding:8px;">
				<tr>
					<td class="tableTdTitle">资源名称</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.resourceName}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源分类</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.resourceCategory}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源代码</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.resourceNum}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源类型</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.resourceTypeText}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">信息资源格式</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.resourceShapeType}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">发布日期</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.publicTime}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">更新周期</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.updateCycle}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">共享条件</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.shareCondition}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">共享方式</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.shareWay}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">关键字</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.keywords}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源提供方</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.organ.name}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源提供方代码</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.organCode}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源提供方联系方式</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.linkmanTel}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源提供方地址</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.dutyAddress}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">开放条件</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.openCondition}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">资源摘要</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.des}}</td>
				</tr>

			</table>
		</div>
		

		<div class="chartbox" v-if="show2 && detailList.fileCommSize > 0">

			<table frame=void v-for="(c , index) in detailList.fileCommonList" :key="index" style="width:100%; background: #fafafa;margin-top:2px; color : #7f7f7f;font-size: 8px; padding:8px;">
				<tr>
					<td class="tableTdTitle">序号</td>
					<td class="tableTdValue" style="text-align: right;color:#f3ab21;">{{ index + 1 }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">文件名</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.fileName }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">上传时间</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.createTime }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle"></td>
					<td class="tableTdValue" style="text-align: right;">
						<a class="down" href="javascript:;" v-on:click="downloadFileCommon(c.id)">下载</a>
					</td>
				</tr>

				</tr>
			</table>

		</div>
		<div class="chartbox" v-show="show3">

			<table frame=void v-for="(c , index) in detailList.fieldList" :key="index" style="width:100%; background: #fafafa;margin-top:2px; color : #7f7f7f;font-size: 8px; padding:8px;">
				<tr>
					<td class="tableTdTitle">编码</td>
					<td class="tableTdValue" style="text-align: right;color:#f3ab21;">{{ c.dataNum }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">中文资源名称</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.columnCn }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">英文资源名称</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.columnEn == '' ?'空':c.columnEn }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">数据长度</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.length }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">共享类型</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.columnShareTypeText }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">是否对社会开放</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.columnIsOpen==1?'是':'否' }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">数据类型</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.dataTypeText }}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">更新周期</td>
					<td class="tableTdValue" style="text-align: right;">{{ c.updateCycleText }}</td>
				</tr>
			</table>
		</div>

		<div class="chartbox" v-show="show4 && detailList.resource.resourceMount == '1' " style="background: #fafafa;">
			
			<table frame=void style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding:8px;">
				<tr>
					<td style="color : #04BE02;font-size: 14px;">{{detailList.custominterface.interfaceName}}:</td>
					<td class="tableTdValue" style="text-align: right;"></td>
				</tr>
				<tr>
					<td class="tableTdTitle">信息资源提供方</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.organ.name}}</td>
				</tr>
				
				<tr>
					<td class="tableTdTitle">接口描述</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.custominterface.des}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">更新时间</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.resource.publicTime}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">请求协议</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.custominterface.interfaceProtocol}}</td>
				</tr>
				<tr  v-if="detailList.custominterface.interfaceProtocol=='HTTP'">
					<td class="tableTdTitle">请求方式</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.custominterface.submitMethod}}</td>
				</tr>
				<tr  v-if="detailList.custominterface.interfaceProtocol=='WEBSERVICE'">
					<td class="tableTdTitle">方法名</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.custominterface.methodName}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">支持格式</td>
					<td class="tableTdValue" style="text-align: right;">{{detailList.custominterface.supportFormat}}</td>
				</tr>
				
			</table>
			<table frame=void style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding: 0 8px;">
				<tr>
					<td class="tableTdTitle" style="color : #04BE02;">请求参数：</td>
					<td class="tableTdValue" style="text-align: right;"></td>
				</tr>
			</table>
			<table frame=void v-for="c in detailList.requestParam" style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding:2px 8px;">
				<tr>
					<td class="tableTdTitle">参数名称</td>
					<td class="tableTdValue" style="text-align: right;color:#E09932">{{c.requestName}}</td>
				</tr>
				
				<tr>
					<td class="tableTdTitle">参数类型</td>
					<td class="tableTdValue" style="text-align: right;">{{c.requestType}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">是否必填</td>
					<td class="tableTdValue" style="text-align: right;">{{c.isRequired == 0?'否':'是'}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">默认值</td>
					<td class="tableTdValue" style="text-align: right;">{{c.defaultValue}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">参数描述</td>
					<td class="tableTdValue" style="text-align: right;">{{c.requestDescribe}}</td>
				</tr>
				
			</table>
			
			<table frame=void style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding: 0 8px;">
				<tr>
					<td class="tableTdTitle" style="color : #04BE02;">返回参数：</td>
					<td class="tableTdValue" style="text-align: right;"></td>
				</tr>
			</table>
			<table frame=void v-for="c in detailList.returnParam" style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding:2px 8px;">
				<tr>
					<td class="tableTdTitle">参数名称</td>
					<td class="tableTdValue" style="text-align: right;color:#E09932">{{c.returnName}}</td>
				</tr>
				
				<tr>
					<td class="tableTdTitle">参数类型</td>
					<td class="tableTdValue" style="text-align: right;">{{c.returnType}}</td>
				</tr>
				<tr>
					<td class="tableTdTitle">参数描述</td>
					<td class="tableTdValue" style="text-align: right;">{{c.returnDescribe}}</td>
				</tr>
			</table>
			
			<table frame=void style="width:100%; background: #fafafa; color : #7f7f7f;font-size: 8px; padding:8px;">
				<tr>
					<td class="tableTdTitle">请求示例</td>
					<td class="tableTdValue" style="text-align: right;"><pre>{{ detailList.custominterface.invokeSanple  }}</pre></td>
				</tr>
				<tr>
					<td class="tableTdTitle">成功响应示例</td>
					<td class="tableTdValue" style="text-align: right;"><pre>{{  detailList.custominterface.responseExample }}</pre></td>
				</tr>
				<tr>
					<td class="tableTdTitle">失败响应示例</td>
					<td class="tableTdValue" style="text-align: right;"><pre>{{  detailList.custominterface.errorReturnSample }}</pre></td>
				</tr>
			</table>
        </div>
		</div>
	
	</view-box>
</template>
<script>
	import {
		ViewBox,
		Tab,
		TabItem,
		VChart,
		VLine,
		VArea,
		VTooltip,
		VLegend,
		VBar,
		XButton,
		VScale,
		XHeader,
    	Tabbar,
    	TabbarItem,
	} from "vux";
	import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
	export default {
		name: "ZymlListxqDetailFile",
		components: {
			ViewBox,
			Tab,
			TabItem,
			VChart,
			VLine,
			VArea,
			VTooltip,
			VLegend,
			VBar,
			XButton,
			VScale,
			XHeader,
    		Tabbar,
    		TabbarItem,
		},
		data() {
			return {
				show1: true,
				show2: false,
				show3: false,
				show4: false,
				searchValue: "1",
				results: [1, 2, 34, 5, 6],
				data: [{
						name: "London",
						月份: "Jan.",
						月均降雨量: 18.9
					},
					{
						name: "London",
						月份: "Feb.",
						月均降雨量: 28.8
					}
				],
				detailList: {}

			};
		},
		computed: {},
		created() {},
		mounted() {},
		methods: {
			onFocus() {},
			onCancel() {},
			onSubmit(keytext) {
				this.$refs.search.setBlur();
				this.$vux.toast.show({
					type: "text",
					position: "top",
					text: keytext
				});
				this.results = [1, 2, 3];
			},
			onChange(keytext) {
				this.results = [11, 22, 33];
			},
			onItemClick(val) {
				if(val == 1) {
					this.show1 = true;
					this.show2 = false;
					this.show3 = false;
					this.show4 = false;
				} else if(val == 2) {
					this.show1 = false;
					this.show2 = true;
					this.show3 = false;
					this.show4 = false;
				} else if(val == 3) {
					this.show1 = false;
					this.show2 = false;
					this.show3 = true;
					this.show4 = false;
				} else if(val == 4) {
					this.show1 = false;
					this.show2 = false;
					this.show3 = false;
					this.show4 = true;
				}
			}
		},
		created() {
			if(this.$route.params.id != undefined) {
				
				this.codeId =  this.$route.params.id; 						// 8913a220f3804981bfa70ddf683d2dd9
				this.resourceSource = this.$route.params.resourceSource;	// 0
				this.categoryCodeId =  this.$route.params.categoryCodeId;	// db34b65720474944b065ad35ed02ccbf
				this.onFetching = true;
				let _self = this;
				this.$store
					.dispatch("getZymlXqDetail", {
						id: this.codeId,
						resourceSource: this.resourceSource,
						categoryCodeId: this.categoryCodeId,
					})
					.then(res => {
						_self.detailList = res.data;
						
					});
			}
		},
	};
</script>

<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}
	
	.tableTdTitle {
		color: #464042;
		font-weight: 700;
	}
	
	.tableTdValue {
		color: #9a9a9a;
	}
</style>